import { ReactElement } from 'react'
import { InputNumber } from 'antd'
import style from './index.module.less'
import classNames from 'classnames'

interface Props {
  unit?: string
  value?: number
  onChange?: (v: number) => void
  disabled?: boolean
  max?: number
  min?: number
  precision?: number
  placeholder?: string
}

function Main ({ unit = '次', disabled, value, max, min, precision = 0, placeholder, onChange }: Props): ReactElement {
  let p = max !== undefined && min !== undefined ? `请输入 ${min} ~ ${max} ${unit}` : '请输入'
  if (typeof placeholder === 'string') {
    p = placeholder
  }
  return (
    <div className={classNames(style.container, { [style.disabled]: disabled })}>
      <InputNumber placeholder={p} className={style.input} value={value} onChange={onChange} precision={precision} disabled={disabled} max={max} min={min} />
      <span className={style.unit}>{unit}</span>
    </div>
  )
}

export default Main
